import React, {Component} from 'react';
import {withRouter, Link, Switch, Route} from 'react-router-dom'
import {Input} from 'antd';
import Loading from "./../loading"


import "./../../static/personal/personalInfo.styl"
import $ from "jquery"

export default class PersonalInfo extends React.Component {
  editInfo(){
    $(".p-btn").css("display","none");
    $(".editBtn").css("display","block");
    $("input").attr("disabled",false).removeClass("ant-input-disabled");
  }
  saveEdit(){
    $(".p-btn").css("display","block");
    $(".editBtn").css("display","none");
    $("input").attr("disabled",true).addClass("ant-input-disabled");
  }
  cancelEdit(){
    $(".p-btn").css("display","block");
    $(".editBtn").css("display","none");
    $("input").attr("disabled",true).addClass("ant-input-disabled");
  }
  render() {
    return (
      <div style={{margin: "40px 30px"}}>
        <Loading />
        <div className="a-line">
          <span>邮箱：</span>
          <Input defaultValue="111111111@qq.com" disabled={true} className="pi-mail"/>
        </div>
        <div className="a-line">
          <span>手机号：</span>
          <Input defaultValue="12345678910" disabled={true}/>
        </div>
        <div className="a-line">
          <span>姓名：</span>
          <Input defaultValue="用户名" disabled={true}/>
        </div>
        <div className="p-btn" onClick={this.editInfo}>编辑个人资料</div>
        <div className="editBtn">
          <div className="saveBtn" onClick={this.saveEdit}>保存</div>
          <div className="cancelBtn" onClick={this.cancelEdit}>取消</div>
        </div>

      </div>
    );
  }
}